<template>
  <div class="area">
    <div class="erea-box">
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div v-show="showAction">
          <div class="check">
            <div class="check-left">
              <div class="check-left-safe">
                <img src="../assets/check.png" alt="" />
                <p>安检</p>
              </div>
              <p class="change">每分钟流量变化</p>
              <div class="otonami" id="otonami1"></div>
              <p class="change">每小时流量变化</p>
              <div class="otonami" id="otonami2"></div>
            </div>
            <div id="check-right" style="width: 50vw; height: 80vh"></div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import { elasticOutOption, coordinateSystem } from "../tools/echarts";
export default {
  data() {
    return {
    };
  },
  mounted() {
    setTimeout(() => {
      coordinateSystem({
        id: "check-right",
        color: "rgba(45, 183, 207, 1)",
        color1: "rgba(45, 183, 207, 0.2)",
        title: {
          text: "{a|实时流量\n}{c|" + 2334 + "\n}{a|实时负荷\n" + 50 + "%}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 10,
                lineHeight: 14,
                color: "#fff",
              },

              c: {
                fontSize: 10,
                lineHeight: 14,
                fontWeight: 1000,
                color: "#fff",
                // padding: [5,0]
              },
            },
          },
        },
      });
      elasticOutOption({id:'otonami1',isSafe:true})
      elasticOutOption({id:'otonami2',isSafe:true})
    }, 1000);
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
.area {
  display: flex;
  align-items: center;
}
.check {
  display: flex;
  padding: 10px 20px;
  width: 100%;
}
.check-left-safe {
  display: flex;
  align-items: center;
}
.check-left-safe p {
  font-size: 16px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #d7d8db;
  padding-left: 8px;
}
.change {
  font-size: 7px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #4d5559;
  padding-top: 8px;
  white-space: nowrap;
}
.otonami {
  display: block;
  margin-top: 4px;
  height: 25vh;
  width: 50vw;
}
.check-right {
  width: 66px;
  padding: 8px 20px;
  text-align: center;
  margin-top: 8px;
  margin-left: 10px;
}
</style>
